<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <!-- 这一条用于移动端更好的预览设置，进行缩放比例 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>博客详情页</title>
  <!-- Bootstrap css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Semmanticui css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <!-- animate动画的css文件 -->
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
  <!-- typo的css文件 -->
  <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
  <!-- 引入自定义css样式 -->
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 代码高亮 -->
  <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
</head>
<body class="qt-bj buryit">




<!-- 导航标签 这个Semmantic-Ui框架有一些导航，写上对应类标签就可以啦-->
<!-- inverted加上这个导航背景就变成黑色（颜色翻转的意思）
     attached没有圆角
     m-padded-tb-mini自己写的css样式类选择器
     secondary里面的每个容器都包裹文字
     stackable当屏幕缩小的时候，导航变成下拉式,堆叠在一块-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
  <div class="ui container"><!-- container是一个一个容器来放 -->
    <div class="ui inverted secondary stackable menu">


      <!-- 导航左边 -->
      <h2 class="ui teal header item">TGF-BK</h2>
      <a href="#" th:href="@{/}" class="m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;首页</a><!-- icom都是图标，官方文档里面有 -->
      <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>&nbsp;&nbsp;归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>&nbsp;&nbsp;关于我</a>

      <!-- 搜索栏 -->
      <!-- right item把div容器放到最后边 -->
      <div class="right m-item item m-mobile-hide">
        <!-- input 自动为表单的形式,
        icon这个div 容器就可以放图标了
        transparent 透明的意思 -->
        <div class="ui icon inverted transparent input">
          <input type="text" placeholder="Search...."><!-- placeholder默认显示的数据 -->
          <i class="search link icon"></i><!-- 搜索图标,link鼠标指到变成手型 -->
        </div>
      </div>


    </div>
  </div>


  <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
  <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
    <i class="sidebar icon"></i><!-- 面包样式 -->
  </a>
</nav>










<!--中间内容,左右布局
    m-padded-tb-large控制上下内边距-->
<!--中间内容-->
<div id="waypoint" class="m-opacity-map m-container-big m-padded-tb-big animate__animated animate__zoomInUp">
  <!-- container中间容器包括了整个中间内容 -->
  <div class="ui container">

    <!-- top attached上面是圆角，下面可以和别的容器拼接 -->
    <!-- 头部 -->
    <div class="ui top attached segment">
      <div class="ui horizontal link list"><!--  horizontal横着的组件内容 -->
        <!--  3个item都变成了行内样式-->
        <div class="item"><!-- 居中 -->
          <img src="http://i2.tiimg.com/724771/7aafc5cff55c9351.jpg" th:src="@{${blog.user.avatar}}"  alt="" class="ui avatar image">
          <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}" >一个人的~</a></div>
        </div>
        <div class="item">
          <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
        </div>
        <div class="item">
          <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
        </div>
      </div>
    </div><!-- 头部结束 -->





    <!-- 图片区域，attahed上下都是直角 -->
    <div class="ui attached segment">
      <!-- fluid image撑满外层容器，就是撑满segment容器 -->
      <img src="http://i2.tiimg.com/724771/f78a53b55c240a89.jpg" th:src="@{${blog.firstPicture}}" alt="" class="ui fluid rounded image">
    </div>




    <!-- 内容区域 -->
    <div class="ui  attached padded segment">
      <div class="ui right aligned basic segment"><!-- right aligned容器靠右，basic去掉边框 -->
        <div class="ui orange basic label" th:text="${blog.flag}">原创</div><!-- orange橙色，label标签,basic去掉背景 -->
      </div>

      <!-- 标题,header标题就用这个属性,center aligned居中 -->
      <h2 class="ui center aligned header" th:text="${blog.title}">属于你的我</h2>
      <br>


      <!--中间主要内容部分,这里要用到后台去发布文本的话，最好不要在里面添加多余的样式标签-->
      <!-- content从后端转换成html再来显示出来 -->
      <div id="content" th:utext="${blog.content}" class=" typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large " >

      </div>





      <!--标签-->
      <div class="m-padded-lr-responsive">
        <!-- 这里label是标签所以basic去掉背景,teal浅蓝色,left pointing左边有个小角 -->
        <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
      </div>




        <div class="ui center aligned basic segment" th:if="${blog.appreciation}">
          <!-- orange橙色，按钮也一样basic去掉背景，circular椭圆圆角 -->
          <button style="background: orange !important; border-radius: 30px !important;" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
            赞赏
          </button>
        </div>











    </div>






    <!--博客信息-->
    <!-- attached上下变成直角跟容器贴合 -->
    <div id="tiaozhuan" class="ui attached positive message" th:if="${blog.shareStatement}">

      <div class="ui middle aligned grid"><!-- 栅格系统,middle aligned垂直方向居中 -->
        <div class="eleven wide column"><!-- 左边占11份 -->
          <ui class="list"><!-- 排列 -->
            <li>作者：<span th:text="${blog.user.nickname}">一个人~</span><a href="#" th:href="@{/about}" target="_blank">（联系作者）</a></li>
            <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-02 09:08</span></li>
            <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
            <li>微信转载：请在文末添加作者微信好友二维码</li>
          </ui>
        </div>
        <div class="five wide column"><!-- 右边占5份 -->
          <!-- right floated靠右,rounded圆角,bordered边线 -->
          <img src="https://kyun.ltyuanfang.cn/tc/2020/08/15/f11f809a42533.png" alt="" class="ui right floated rounded bordered image" style="width: 110px">
        </div>
      </div>

    </div>







    <!-- 留言区域,有留言组件 -->
    <div  class="ui bottom attached segment" th:if="${blog.commentabled}"><!-- bootom attached最下面的模块加一个，跟上面拼接 -->
      <!-- teal浅蓝色 segment容器 -->

      <!-- 显示评论的列表 -->
      <!-- id="comment-container"axaj定义的id用来用户点击提交只刷新当前这个div区域 -->
      <div id="comment-container"  class="ui teal segment">
        <div th:fragment="commentList">
          <div class="ui threaded comments" style="max-width: 100%;">
            <h3 class="ui dividing header">评论</h3>
            <div class="comment" th:each="comment : ${comments}">
              <a class="avatar">
                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">
              </a>

              <!--父评论-->
              <div class="content">
                <a class="author">
                  <span th:text="${comment.nickname}">Matt</span>
                  <div class="ui mini basic teal left pointing label m-padded-mini" th:text="${comment.adminComment} ? '博主':'游客'">博主</div>
                </a>
                <div class="metadata">
                  <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                </div>
                <div class="text" th:text="${comment.content}">
                  How artistic!
                </div>
                <div class="actions">
                  <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                </div>
              </div>


              <!-- 第二层子级 -->
              <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0"><!-- 判断子级不为空才显示下面的区域 -->
                <!-- 这个里面都是第二层嵌套的内容 -->
                <div class="comment" th:each="reply : ${comment.replyComments}"><!-- 拿到评论里面的子类 -->
                  <a class="avatar">
                    <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">
                  </a>

                  <!--二级评论包括所有后面的评论-->
                  <div class="content">
                    <a class="author">
                      <span th:text="${reply.nickname}">小红</span>
                      <div class="ui mini basic teal left pointing label m-padded-mini" th:text="${reply.adminComment} ? '博主':'游客'">博主</div>
                      &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span><!-- m-teal颜色@的名字颜色 -->

                    </a>
                    <div class="metadata">
                      <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                    </div>
                    <div class="text" th:text="${reply.content}">
                      How artistic!
                    </div>
                    <div class="actions">
                      <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                    </div>
                  </div><!-- 第二层子级所有结束 -->

                </div>
              </div>



            </div>



          </div>
        </div>
      </div>




      <!-- 评论提交按钮 -->
      <div id="comment-form" class="ui form">
        <!-- 设置3个隐含域hidden隐藏的3个输入框用于提交name到后端 -->
        <!-- blog.id对应博客id -->
        <input type="hidden" name="blog.id" th:value="${blog.id}">
        <!-- parentCommentId是否有父级，默认为-1 -->
        <input type="hidden" name="parentComment.id" value="-1">


        <div class="field"><!-- 评论输入容器，trxtarea多行文本域,placeholder默认显示 -->
          <textarea required name="content" placeholder="请输入评论信息..."></textarea>
        </div>

        <div class="fields"><!-- 最下面发布按钮那一整行 -->
          <div class="field m-mobile-wide m-margin-bottom-small"><!-- 整个输入评论的地方，m-mobile-wide当移动端的时候宽度填满,m-margin-bottom-small上下的宽度的距离 -->
            <div class="ui left icon input"><!-- 姓名,left左边,input输入框，icon图标 -->
              <i class="user icon"></i>
              <input type="text" required name="nickname" placeholder="姓名"   th:value="${session.thUser}!=null ? ${session.thUser.nickname} : (${session.user}!=null ? ${session.user.nickname})">
            </div>
          </div>

          <div class="field m-mobile-wide m-margin-bottom-small" ><!-- 邮箱 -->
            <div class="ui left icon input">
              <i class="mail icon"></i>
              <input type="text" name="email" required placeholder="邮箱"   th:value="${session.thUser}!=null ? ${session.thUser.email} : (${session.user}!=null ? ${session.user.email})">
            </div>
          </div>

          <div class="field  m-margin-bottom-small m-mobile-wide"><!-- 发布按钮 -->
            <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
          </div>
        </div>

      </div>

    </div>

  </div>
</div>






<!-- 让这整个容器绝对定位，无论怎么滑动都固定显示 -->
<div class="m-padded m-fixed m-right-bottom">
<div class="ui vertical icon buttons">
  <!-- 直接跳到留言的地方 -->
  <a href="#comment-container" class="ui teal button">留言</a>
  <!-- 底部直接划到顶部,a链接设置成#就可以直接到顶部 -->
  <a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
</div>
</div>








<br>
<br>









<!-- 底部 -->
<!-- m-padded-tb-mini自定义样式标签设置间隔,移动端隐藏底部 -->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
  <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


    <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
    <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
    <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
      <!-- 占几份直接用英文的数字 -->


      <!-- 第一个格子 -->
      <div class="four wide column"><!-- four4份 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <div class="item"><!-- item居中对齐 -->
            <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
            <img src="http://i2.tiimg.com/724771/142be0e76be9c182.jpg" class="ui rounded image ewm-dx" alt="" >
          </div>
        </div>
      </div>


      <!-- 第二个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
        </div>
      </div>


      <!-- 第三个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">Email: 2247605840@qq.com</a>
          <a href="#" class="item">QQ: 2247605840</a>
          <a href="#" class="item">微信: xinyikuoai</a>
        </div>
      </div>


      <!-- 第四个格子 -->
      <div class="six wide column"><!-- seven7份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
        <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
      </div>
    </div>


    <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



  </div><!-- 最外面的容器container -->
</footer>





<!-- 当点击上面按钮，才弹出下面二维码 -->
<!-- flowing popup transition hidden当点击赞赏按钮的时候才弹出来 -->
<!-- 这里加上jquery（当点击赞赏按钮时，弹出下面2个二维码）payQR二维码显示区域的类标签 -->
<div class="modal fade" style=" margin: auto !important;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content"style=" width: 340px !important;margin: auto">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">

        <div class="ui orange basic label" >
          <!-- 图片组件 -->
          <!-- style="font-size: inherit这个样式继承上面一级容器label标签的字体大小 -->
          <div class="ui  images" style="font-size: inherit !important;">
            <div class="image" style="display:inline-block !important">
              <img src="https://kyun.ltyuanfang.cn/tc/2020/08/15/bf3589deefb98.png"  alt="" class="ui rounded bordered image" style="width: 120px"><!-- rounded bordered圆角边线 -->
              <div style="color: black !important">支付宝</div>
            </div>
            <div class="image" style="display:inline-block !important">
              <img src="https://kyun.ltyuanfang.cn/tc/2020/08/15/185df675bb1a7.png"  alt="" class="ui rounded bordered image" style="width: 120px">
              <div style="color: black !important">微信</div>
            </div>
          </div><!-- 图片组件结束 -->
        </div>

      </div>

    </div>
  </div>
</div>








<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!-- 因为Semmantic-UI框架要依赖jquery包 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>

<!-- Semmantic-UI的js文件 -->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script src="https://myCDN.com/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
  //当点击面包导航按钮，就显示导航列表
  //menu.toggle选中面包导航按钮，当点击的时候m-item这个类标签(导航列表)，有没有m-mobile-hide这个样式，没有就加上，有就减去
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');//toggleClass这个的作用就是当点击这个按钮，如果有这个样式就减去，如果没有就加上
  });


 ;













  //评论表单验证
  $('.ui.form').form({
    fields: {
      title: {
        identifier: 'content',
        rules: [{
          type: 'empty',
          prompt: '请输入评论内容'
        }
        ]
      },
      content: {
        identifier: 'nickname',
        rules: [{
          type: 'empty',
          prompt: '请输入你的大名'
        }]
      },
      type: {
        identifier: 'email',
        rules: [{
          type: 'email',
          prompt: '请填写正确的邮箱地址'
        }]
      }
    }
  });



  //使用axaj的方式来校验是否为空
  $('#commentpost-btn').click(function () {
    var boo = $('.ui.form').form('validate form');
    if (boo) {
      console.log('校验成功');
      postData();
    } else {
      console.log('校验失败');
    }
  });

  //校验成功（都输入了信息）把用户输入的信息发送到后端去（因为同时要动态刷新列表所以用load重新加载一下）
  //#comment-container后面的数据传递到这个id选择器里面
  function postData() {
    $("#comment-container").load(/*[[@{/comments}]]*/"/comments",{
      "parentComment.id" : $("[name='parentComment.id']").val(),
      "blog.id" : $("[name='blog.id']").val(),
      "nickname": $("[name='nickname']").val(),
      "email"   : $("[name='email']").val(),
      "content" : $("[name='content']").val(),
    },function (responseTxt, statusTxt, xhr) {//提交成功后需要做什么
      //当点击提交的时候自动弹到评论（#comment-container）哪里
      clearContent();
    });
  }

  //提交成功后干的事情(提交成功后把全部都清空)
  function clearContent() {
    $("[name='content']").val('');
    $("[name='parentComment.id']").val(-1);
    $("[name='content']").attr("placeholder", "请输入评论信息...");
  }

  //当用户点击回复的时候，拿到要回复的那个人的信息，传递到评论输入框内
  function reply(obj) {
    //获取到回复那一条定义的data-commentid（id）
    var commentId = $(obj).data('commentid');
    //获取到回复那一条定义的data-commentnickname（名字）
    var commentNickname = $(obj).data('commentnickname');
    //拿到后要变成@+姓名放到评论输入框上
    $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
    $("[name='parentComment.id']").val(commentId);
    //拿到后弹到评论输入框（#comment-form）进行输入
    $(window).scrollTo($('#comment-form'),500);
  }
</script>
</body>
</html>